<template>
  <view
    class="g-button"
    :class="hover ? 'g-button-hover' : ''"
    :style="buttonStyle"
    @click="click"
  >
    <view v-if="icon" :style="iconStyle" />
    <view class="g-button-text">{{ text }}</view>
  </view>
</template>

<script setup lang="ts">
import { computed } from "vue";

const props = defineProps({
  // 文字
  text: {
    type: String,
    default: "取药",
  },
  // 图标
  icon: {
    type: String,
    default: "",
  },
  // 图标与文字间距
  gap: {
    type: String,
    default: "6.95rpx",
  },
  // 内容间距
  padding: {
    type: String,
    default: "13.9rpx 34.75rpx",
  },
  // 外边距
  margin: {
    type: String,
    default: "0",
  },
  // 背景色
  background: {
    type: String,
    default: "linear-gradient(180deg, #E9F7C6 1%, #C8DF8F 100%)",
  },
  // 宽度
  width: {
    type: String,
    default: "max-content",
  },
  // 字体大小
  size: {
    type: String,
    default: "20.85rpx",
  },
  // 对齐方式
  align: {
    type: String,
    default: "center",
  },
  // 字体颜色
  color: {
    type: String,
    default: "#41992D",
  },
  // 字体粗细
  weight: {
    type: [Number, String],
    default: 400,
  },
  // 圆角
  radius: {
    type: String,
    default: "30.58rpx",
  },
  // 是否显示hover效果
  hover: {
    type: Boolean,
    default: true,
  },
});
const emit = defineEmits(["click"]);

const buttonStyle = computed(() => {
  let style = {
    borderRadius: `${props.radius}`,
    fontWeight: `${props.weight}`,
    background: props.background,
    justifyContent: props.align,
    fontSize: `${props.size}`,
    width: `${props.width}`,
    padding: `${props.padding}`,
    margin: `${props.margin}`,
    color: props.color,
  };
  if (props.background.includes("gradient")) {
    style[
      "boxShadow"
    ] = `inset 0 1.39rpx 1.39rpx 0 rgba(255, 255, 255, 0.5), 0 6.95rpx 13.9rpx 0 rgba(65,153,45,0.2)`;
  }
  return style;
});
const iconStyle = computed(() => {
  return {
    marginRight: `${props.gap}`,
    height: `50rpx`,
    width: `106.25rpx`,
    background: `url(${props.icon}) no-repeat`,
    backgroundSize: "100% 100%",
  };
});

// 点击事件
const click = () => {
  emit("click");
};
</script>
<style lang="scss" scoped>
.g-button {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  &-text {
    font-family: Source Han Sans;
  }
}
.g-button-hover:active {
  opacity: 0.8;
  box-shadow: inset 0 1.39rpx 1.39rpx 0 rgba(255, 255, 255, 0.5),
    0 6.95rpx 13.9rpx 0 rgba(33, 100, 208, 0.16) !important;
}
</style>
